<template>
	<view class="content">
		<scroll-view scroll-x="true" class="scroll">
			<view class="box" :key="index" v-for="(item,index) in list">
				<view @click="goList(item)" class="same" >
					<view >
						<image class="myicons" :src="item.icon" ></image>
						<!-- <view :class="item.icon"></view> -->
					</view>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
		 <!-- 选择框 -->

    <choiceCateType
		v-if="CateMask"
      urls="/package/pages/release/recruitment"
			@hideMask="hideMask"
    />
	</view>
</template>


<script>
import choiceCateType from "@/components/choiceCateType.vue";
	export default {
		 components: { choiceCateType },
		data() {
			return {
					CateMask:false,
				list: [{
					id: 0,
					name: '建筑招工',
					icon: 'https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/zhaogong/jianzhuzhaogong.png'
				}, {
					id: 1,
					name: '装修招工',
					icon: 'https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/zhaogong/zhuangxiuzhaogong.png'
				}, {
					id: 2,
					name: '能源用工 ',
					icon: 'https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/zhaogong/nengyuanyonggong.png'
				}, {
					id: 3,
					name: '其他用工',
					icon: 'https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/zhaogong/qitayonggong.png'
				},  {
					id: 4,
					name: '发布招工',
					icon: 'https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/zhaogong/fabuzhaogong.png'
				}]

			}
		},
		
		methods: {
			hideMask(val){
			
					this.CateMask = false;
			},
			goList(id){
 uni.setStorageSync("city1", this.$store.state.city?this.$store.state.city:'全国');

				if (id.id== 4) {
					this.CateMask  =true;
					// this.$refs.choiceCateType.showMask();
						return
				} else {
					uni.navigateTo({
						url:"/package/pages/siteRecruitment/list?id="+id.id
					})
				}
			}

		}
	}
</script>
<style>
	@import url("/static/fonts/iconfont.css");
	page{
		background: #EFEFEF;
	}
</style>

<style lang="scss" scoped>
	.scroll {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		// margin-bottom: 4rpx;
	}
	

	.box {
		margin-top: 100rpx;
		padding: 30rpx 0 0 0;
		background: #FFFFFF;
		display: inline-block;
		width: 20%;
		text-align: center;
		
		.same {
			// height: 110rpx;
			margin-bottom: 30rpx;
			.myicons {
				border-radius: 50%;
				width: 80rpx;
				height: 80rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				// background: $uni-color-primary;
				color: #fff;
				
			}
			
			
			.name {
				font-size: 12px;
				color: #333333;
				margin-top: 10rpx;
			}
		}
	}
</style>
